{% macro selectinput(name, values, value='') -%}
    <select name="{{ name }}" id="{{ name }}" > {# class="form-control"  #}
    {% for v in values %}
        <option value="{{ v }}"  {{ 'selected' if value==v }}>{{ v }}</option>
    {% endfor %}
    </select>
{%- endmacro %}
{% macro selectinputdict(name, values, value='',emptyitem=false) -%}
    <select name="{{ name }}" id="{{ name }}"  > {# class="form-control"  #}
    {{  '<option/>'|safe if emptyitem }}
    {% for k,v in values.items() %}
        <option value="{{ k }}"  {{ 'selected' if value==k }}>{{ v }}</option>
    {% endfor %}
    </select>
{%- endmacro %}


{% extends "layout.html" %}

{% block body %}
<form class="form-horizontal" method="post" action="?" id="form1">
    <h3>编辑项目 # {{ data.projid }} - <a href="/prj/editpriv/{{ data.projid }}" style="font-size: medium;" class="btn btn-xs btn-primary">仅编辑权限</a></h3>
  <table class=table width="100%">
    <tr><td width="200px">项目标题 </td><td colspan=2 >
        <input type="text"  class="form-control" id="title" name="title"  value="{{ data.title }}" style="width: 500px" >
    </td></tr>
    <tr><td>对所有访问者可见<br>(仅经过验证的对象可见)</td><td>
           <input type="checkbox"  style="height:20px;" id="visible" name="visible"  value="Y" {{ 'checked' if data.visible else "" }}>
    </td>
      <td width="600px"></td>
    </tr>

<tr><td>状态</td><td >
        {{ selectinput('status', ("Annotate", "ExploreOnly","Annotate No Prediction"), value=data.status)  }}
  </td></tr>
<tr><td>项目描述</td><td>
        <input type="text"  class="form-control" id="projtype" name="projtype"  value="{{ data.projtype|default('',true) }}">
      </td></tr>

  <tr><td>手动排序预设释义
  <br><button class="btn btn-default" type="button" onclick="PickPresetFromOthersProject();"><i class="fas fa-clone"></i> 从其他项目中挑选</button>
  </td><td>
        <input type="hidden"  class="form-control" id="initclassiflist" name="initclassiflist"  value="{{ data.initclassiflist|default('',true) }}">
      <select name='inittaxo' id='inittaxo' class="taxolb" style="width: 100%;" multiple>
    {% for r in g.predeftaxo %}
      <option value="{{ r[0] }}" selected> {{ r[1] }}</option>
    {% endfor %}
  </select>
    </td><td>
      预设工具允许创建一个预先定义的类别列表，用于对来自项目的图像进行排序
<ul><li>该列表可以直接从其他项目复制(使用Pick from others项目)
    <li>可以使用自动完成功能添加新的类别
</ul>
  </td></tr>

  <tr><td>可用于排序和显示的字段</td><td>
        <textarea  class="form-control" id="classiffieldlist" name="classiffieldlist"  rows="8">{{ data.classiffieldlist|default('',true) }}</textarea>
    </td><td>
      格式：Var=var_name（Var：导入变量，var_name：显示变量名）
<br>例：depth_min=minimum depth [m]，其中：
<ul><li>depth_min是来源于导入的TSV文件中的变量
<li>minimum depth [m]是显示的名称</ul>
  注意 :
<ul><li>可以从另一个项目复制该表(在另一个选项卡中打开)
<li>只能小写</ul>
  可用字段 :
    {% for x in  g.maplist %}{{ x }}, {% endfor %}

   </td></tr>
  <tr><td>在手动分类页面的图像<br>弹出窗口中显示的字段</td><td>
        <textarea  class="form-control" id="popoverfieldlist" name="popoverfieldlist"  rows="8">{{ data.popoverfieldlist|default('',true) }}</textarea>
    </td><td>
      格式： Var=var_name（Var：导入变量，var_name：显示变量名）
<br>例：depth_min=minimum depth [m]，其中：
<ul><li>depth_min是来源于导入的TSV文件中的变量
<li>minimum depth [m]是显示的名称</ul>
  注意 :
<ul><li>可以从另一个项目复制该表(在另一个选项卡中打开)
<li>只能小写</ul>
  可用字段：
    {% for x in  g.maplist %}{{ x }}, {% endfor %}

   </td></tr>
  <tr><td>SCN网络</td><td>
        <select  class="form-control" id="cnn_network_id" name="cnn_network_id" >
        <option value=""></option>
        {% for k,v in g.scn.items() %}
          <option value="{{ k }}" {{ 'selected' if data.cnn_network_id==k }}>{{ v.name }}</option>
        {% endfor %}
        </select>
    </td><td>SCN网络用于预测，如果您更改它，使用此网络计算的现有功能将被删除。
    <br>新的特征将在下一次自动分类时重新计算。
    </td></tr>
  <tr><td>评论</td><td>
        <textarea  class="form-control" id="comments" name="comments"  rows="4">{{ data.comments|default('',true) }}</textarea>
    </td><td>
    </td></tr>

  <tr><td>权限</td><td colspan="2">
        <table class="table table-bordered table-verycondensed" style="width:500px;">
          <tr>
            <td >姓名</td>
            <td>权限</td>
            <td>删除</td>
          </tr>
      {% for pr in data.projmembers %}
          <tr>
            <td>{{ selectinputdict('priv_'~pr.id~'_member', g.users, pr.member) }}</td>
            <td>{{ selectinput('priv_'~pr.id~'_privilege', ('View', 'Annotate','Manage'), pr.privilege) }}</td>
            <td><input type="checkbox" name="priv_{{ pr.id }}_delete" value="Y"></td>
          </tr>

    {% endfor %}
          <tr>
            <td>新权限 :</td>
          </tr>
          <tr>
            <td>{{ selectinputdict('priv_new_member', g.users, '',true) }}</td>
            <td>{{ selectinput('priv_new_privilege', ('View', 'Annotate','Manage'), '') }}</td>
            <td></td>
          </tr>

        </table>

    </td><td>
    </td></tr>

</table>

    <input type="hidden" name="save" value="Y">
    <div class="form-group">
    <div class="col-sm-offset-2 col-sm-1">
      <button type="button" onmousedown="SubmitForm();" class="btn btn-primary">保存</button>
    </div>
    <div class="col-sm-2">
      <a href="/prj/{{ data.projid }}" class="btn btn-warning">取消，返回到项目</a>
    </div>
  </div>
</form>


 <script>
$(document).ready(function() {
    $(".taxolb").select2({
        ajax: {
            url: "/search/taxo",
            dataType: 'json',
            delay: 250,
            data: function (params) {  return { q: params.term, page: params.page };  },
            processResults: function (data, page) { return { results: data};  },
            cache: true
        },
        minimumInputLength: 3
    }); // Select2 Ajax
    $("select[name$=member]").select2({
        ajax: {
            url: "/search/users",
            dataType: 'json',
            delay: 250,
            data: function (params) {  return { q: params.term, page: params.page };  },
            processResults: function (data, page) { return { results: data};  },
            cache: true
        },
        minimumInputLength: 2
    }); // Select2 Ajax
    $('#TaxoModal').on('show.bs.modal', function (e) {
        var button = $(e.relatedTarget); // Button that triggered the modal
        var targetid = button.data('mytargetid');
         $("#TaxoModalBody").html("Loading...");
         $("#TaxoModalBody").load("/search/taxotree?target="+targetid);
    });
    }); // Ready

 $('#inittaxo').on("change", function (e) {
  var selected=[];
   $('#inittaxo :selected').each(function(){
     selected.push($(this).val())
      });
   $("#initclassiflist").val(selected.join())
 });
function SubmitForm()
{ {# On passe par cette fonction intermediare car quand on avait le focus sur un select2 dans certaines situations ca ne fesait pas le post #}
    document.getElementById("form1").submit();
}
function PickPresetFromOthersProject() {
  At2PopupWaitOpenLoad(2,'/prj/popupeditpreset/{{ data.projid }}','Pick preset from others projects',{});
}
 </script>


<!-- Modal -->
<div class="modal " id="TaxoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div id="TaxoModalBody">...</div>
      </div>
    </div>
  </div>
</div>


{% endblock %}